;(function(global) {
  global.choose = {
    template: `
              <div v-if="isShow" class="topic-pop-container">
                <div class="topic-pop-title">行业</div>
                <div class="topic-select-container">
                  <div  v-for="(item, index) of cateData" class="topice-select-item">
                    <div class="topic-popup-common" :class="industryActive===index?'topic-popup-active':''" @click="industryChoose(index)">
                      <div>{{ item.title }}</div>
                    </div>
                  </div>
                </div>
                <div class="topic-pop-title topic-pop-area">地区</div>
                <div class="topic-select-container">
                  <div v-for="(item, index) of cateData[industryIndex].catecrds"  v-if="isShowArea[index]"  class="topice-select-item">
                    <div class="topic-popup-common" :class="areaActive===index?'topic-popup-active':''" @click="areaChoose(index)">
                      <div>{{ item.title }}</div>
                    </div>
                  </div>
                </div>
                <div class="topic-pop-title topic-pop-subject">科目</div>
                <div class="topic-select-container">
                  <div v-for="(item, index) of cateData[industryIndex].catecrds[areaIndex].catecrds"  class="topice-select-item">
                    <div class="topic-popup-common" :class="subjectActive===index?'topic-popup-active':''" @click="subjectChoose(index,item)">
                      <div>{{ item.title }}</div>
                    </div>
                  </div>
                </div>
                <div class="topic-popup-confirm topic-popup-compatible">
                  <van-button type="default" v-show="isShowReplayBtn" @click="replay">重置</van-button>
                  <van-button type="danger" @click="confirm" :class="{topic:isShowReplayBtn}">确认</van-button>
                </div>
              </div>
          `,
    data() {
      return {
        cateData: [],
        isShow: false,
        // 选取的数据
        chooseIndustry: '',
        // 地区选择数据
        areaData: [],
        // 用来判断专业选择的是哪一个
        industryIndex: Number,
        // 用来判断地区选择的是哪一个
        areaIndex: Number,
        // 用来改变专业选中的样式
        industryActive: Number,
        // 用来改变地区选中的样式
        areaActive: Number,
        // 用来改变科目选中的样式
        subjectActive: Number,
        // 选中的科目名
        chooseIndustryName: '',
        // 选中的地区名
        chooseAreaName: '',
        // 选中的科目名
        chooseSubjectName: '',
        // 用来存选中的结果
        chooseRerult: {},
        // 用来存选中的科目数据
        chooseSubjectDate: {},
        // 地区选择不限的时候 用来判断选择科目的时候 地区显示哪些
        isShowArea: []
      }
    },
    watch: {
      industryIndex(value) {
        for (let i = 0; i < this.cateData[value].catecrds.length; i++) {
          this.isShowArea.push(true)
        }
        this.isShow = true
      }
    },
    props: ['isShowReplayBtn', 'unlimited'],
    computed: {},
    methods: {
      // 专业选择
      industryChoose(index, type) {
        this.industryIndex = index
        this.industryActive = index
        this.chooseIndustryName = this.cateData[index].title
        this.areaIndex = 0
        this.areaActive = ''
        this.subjectActive = ''
        this.chooseAreaName = ''
        this.chooseSubjectName = ''
        this.$emit('change-industry', this.chooseIndustryName)
        this.isShowArea = []
        for (let i = 0; i < this.cateData[index].catecrds.length; i++) {
          this.isShowArea.push(true)
        }
        if (this.unlimited === false) {
          this.chooseRerult.industryChooseName1 = this.cateData[index].title
          this.chooseRerult.industryId1 = this.cateData[index].id
        } else {
          this.chooseRerult.industryChooseName = this.cateData[index].title
          this.chooseRerult.industryId = this.cateData[index].id
        }

        if (!type) {
          // 点击过后pop不可关闭
          this.$emit('can-click-close', false)
        }
      },
      // 地区选择触变方法
      areaChoose(index, type) {
        this.areaIndex = index
        this.areaActive = index
        let areaData = this.cateData[this.industryIndex].catecrds
        this.subjectActive = ''
        this.chooseSubjectName = ''
        this.isShowArea = []
        for (
          let i = 0;
          i < this.cateData[this.industryIndex].catecrds.length;
          i++
        ) {
          this.isShowArea.push(true)
        }
        if (areaData[index].title !== '不限') {
          if (this.unlimited === false) {
            this.chooseRerult.subjectData1 = JSON.stringify({})
          } else {
            this.chooseRerult.subjectData = JSON.stringify({})
          }
        }
        if (this.chooseRerult.hasOwnProperty('subjectChooseName')) {
          delete this.chooseRerult.subjectChooseName
        }
        if (this.unlimited === false) {
          this.chooseRerult.areaChooseName1 = areaData[index].title
          this.chooseRerult.areaData1 = JSON.stringify(areaData[index])
        } else {
          this.chooseRerult.areaChooseName = areaData[index].title
          this.chooseRerult.areaData = JSON.stringify(areaData[index])
        }
        this.chooseAreaName = areaData[index].title
        this.$emit('change-area', this.chooseAreaName)

        // if (this.unlimited === false) {
        //   this.chooseRerult.areaData1 = JSON.stringify(areaData[index])
        // } else {
        //   this.chooseRerult.areaData = JSON.stringify(areaData[index])
        // }
        if (!type) {
          // 点击过后pop不可关闭
          this.$emit('can-click-close', false)
        }
      },
      // 科目选择触变方法
      subjectChoose(index, item, type) {
        if (this.chooseAreaName === '不限') {
          for (
            let i = 0;
            i < this.cateData[this.industryIndex].catecrds.length;
            i++
          ) {
            let isTrue = false
            for (let it of item.pid) {
              if (this.cateData[this.industryIndex].catecrds[i].id === it) {
                isTrue = true
              }
              if (this.cateData[this.industryIndex].catecrds[i].id === 0) {
                isTrue = true
              }
            }
            this.isShowArea[i] = isTrue
          }
        }
        this.subjectActive = index
        let subject = this.cateData[this.industryIndex].catecrds[this.areaIndex]
          .catecrds
        this.chooseSubjectDate = subject[index]
        if (this.unlimited === false) {
          this.chooseRerult.subjectChooseName1 = subject[index].title
          this.chooseRerult.subjectData1 = JSON.stringify(
            this.chooseSubjectDate
          )
        } else {
          this.chooseRerult.subjectChooseName = subject[index].title
          this.chooseRerult.subjectData = JSON.stringify(this.chooseSubjectDate)
        }
        this.chooseSubjectName = subject[index].title
        this.$emit('change-subject', this.chooseSubjectName)

        // if (this.unlimited === false) {
        //   this.chooseRerult.subjectData1 = JSON.stringify(
        //     this.chooseSubjectDate
        //   )
        // } else {
        //   this.chooseRerult.subjectData = JSON.stringify(this.chooseSubjectDate)
        // }
        if (!type) {
          // 点击过后pop不可关闭
          this.$emit('can-click-close', false)
        }
      },
      // 确认按钮事件
      confirm() {
        if (
          this.chooseIndustryName === undefined ||
          this.chooseIndustryName === ''
        ) {
          this.$toast('请选择行业')
          return
        }
        if (this.chooseAreaName === undefined || this.chooseAreaName === '') {
          this.$toast('请选择地区')
          return
        }
        if (
          this.chooseSubjectName === undefined ||
          this.chooseSubjectName === ''
        ) {
          this.$toast('请选择科目')
          return
        }
        // 将选取结果存入localStorage
        setLStorageObj(this.chooseRerult)
        // 关闭弹出层
        this.$emit('close-pop', this.chooseRerult)
      },
      // 重置按钮事件
      replay() {
        this.industryActive = ''
        this.chooseIndustryName = ''
        this.areaActive = ''
        this.subjectActive = ''
        this.chooseAreaName = ''
        this.chooseSubjectName = ''
        this.chooseRerult = {}
        // 点击过后pop不可关闭
        this.$emit('can-click-close', false)
      }
    },
    created() {
      let obj = {}
      if (this.unlimited) {
        obj.loadtype = 1
      } else {
        obj.loadtype = 0
      }
      // 判断以前是否选了地区科目
      let areaChooseName, subjectChooseName, industryChooseName
      if (this.unlimited) {
        areaChooseName = getLStorageObj(['areaChooseName']).areaChooseName
        subjectChooseName = getLStorageObj(['subjectChooseName'])
          .subjectChooseName
        industryChooseName = getLStorageObj(['industryChooseName'])
          .industryChooseName
      } else {
        areaChooseName = getLStorageObj(['areaChooseName1']).areaChooseName1
        subjectChooseName = getLStorageObj(['subjectChooseName1'])
          .subjectChooseName1
        industryChooseName = getLStorageObj(['industryChooseName1'])
          .industryChooseName1
      }
      examService.getExamIndex(obj).then(res => {
        const result = res
        this.cateData = res
        this.areaIndex = 0
        this.industryIndex = 0
        // 如果已经选择过了则渲染出来
        if (industryChooseName) {
          this.$emit('can-click-close', true)
          for (let j in result) {
            if (result[j].title === industryChooseName) {
              this.industryChoose(Number(j), 1)
              for (let i in result[j].catecrds) {
                this.isShowArea.push(true)
                if (result[j].catecrds[i].title === areaChooseName) {
                  this.areaChoose(Number(i), 1)
                  for (let index in result[j].catecrds[i].catecrds) {
                    if (
                      result[j].catecrds[i].catecrds[index].title ===
                      subjectChooseName
                    ) {
                      this.subjectChoose(
                        Number(index),
                        result[j].catecrds[i].catecrds[index],
                        1
                      )
                    }
                  }
                }
              }
            }
          }
        } else {
          // 默认选择
          this.industryIndex = 0
          this.industryActive = 0
          this.chooseIndustryName = this.cateData[0].title
          if (this.unlimited === false) {
            this.chooseRerult.industryChooseName1 = this.cateData[0].title
            this.chooseRerult.industryId1 = this.cateData[0].id
          } else {
            this.chooseRerult.industryChooseName = this.cateData[0].title
            this.chooseRerult.industryId = this.cateData[0].id
          }

          for (
            let i = 0;
            i < this.cateData[this.areaIndex].catecrds.length;
            i++
          ) {
            this.isShowArea.push(true)
          }
          this.$emit('change-industry', this.cateData[0].title)
          this.$emit('can-click-close', false)
        }
      })
    },
    mounted() {}
  }
})(window)
